<script setup lang='ts'>
import Tunnel from '../needs/Tunnel.vue'
import Cloud from '../needs/Cloud.vue'
import SDW from '../needs/SDW.vue'
import Accel from '../needs/Accel.vue'

const form = reactive({
  businessType: 'Fusionwan',
})
const fileList = ref([
  {
    name: '方案拓扑图.png',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
  {
    name: '方案文档.docs',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
])

const editableTabs = ref(['云网络', '应用访问', 'SDWAN'])
const activeName = computed(() => {
  return editableTabs.value[editableTabs.value.length - 1]
})

const sortTabs = computed(() => {
  // 按 云专线、云网络、应用访问、SDWAN 排序
  return editableTabs.value.sort((a, b) => {
    const order = ['云专线', '云网络', '应用访问', 'SDWAN']
    return order.indexOf(a) - order.indexOf(b)
  },
  )
})
</script>

<template>
  <el-form :model="form" label-width="auto">
    <div class="form-block" data-title="需求描述" mb10>
      <div grid grid-cols-2 items-center gap-x-2>
        <el-form-item label="业务类型*">
          <el-select v-model="form.businessType" placeholder="">
            <el-option label="云专线" value="云专线" />
            <el-option label="云网络" value="云网络" />
            <el-option label="Fusionwan" value="Fusionwan" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户业务现状*">
          <el-input type="textarea" />
        </el-form-item>
        <el-form-item label="客户业务目标*">
          <el-input type="textarea" />
        </el-form-item>
        <el-form-item label="差距分析*">
          <el-input type="textarea" />
        </el-form-item>
      </div>
      <Tunnel v-if="form.businessType === '云专线'" />
      <Cloud v-if="form.businessType === '云网络'" />
      <Accel v-if="form.businessType === '应用访问'" />
      <!-- <SDW v-if="form.businessType === 'SDWAN'" /> -->

      <template v-if="form.businessType === 'Fusionwan'">
        <el-form-item label="业务" flex-y-center>
          <el-checkbox-group v-model="editableTabs" class="w-120" grid grid-cols-4>
            <el-checkbox label="云专线" value="云专线" border />
            <el-checkbox label="云网络" value="云网络" border />
            <el-checkbox label="应用访问" value="应用访问" border />
            <el-checkbox label="SDWAN" value="SDWAN" border />
          </el-checkbox-group>
          <span v-if="!editableTabs.length" rounded px-2 text-red>
            至少选择一个业务
          </span>
        </el-form-item>

        <el-tabs v-if="editableTabs.length" v-model="activeName" type="border-card" class="!bg-purple:5">
          <el-tab-pane v-for="item in sortTabs" :key="item" :label="item" :name="item">
            <Tunnel v-if="item === '云专线'" />
            <Cloud v-if="item === '云网络'" />
            <Accel v-if="item === '应用访问'" />
            <SDW v-if="item === 'SDWAN'" />
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
    <div mb10 flex gap-5>
      <div class="form-block" data-title="交付质量">
        <el-form-item label="冗余要求">
          <el-input />
        </el-form-item>
        <SLAItem />

        <el-form-item label="交付时间">
          <el-input />
        </el-form-item>
        <el-form-item label="其他要求">
          <el-input />
        </el-form-item>
      </div>
      <div class="form-block" data-title="公有云信息">
        <el-form-item label="公有云接入区域">
          <el-input />
        </el-form-item>
        <el-form-item label="客户账户/项目ID">
          <el-input />
        </el-form-item>
      </div>
    </div>
    <div mb10 flex gap-5>
      <div class="form-block" data-title="客户交付联系人">
        <el-form-item label="姓名" label-width="50">
          <el-input />
        </el-form-item>
        <el-form-item label="电话" label-width="50">
          <el-input />
        </el-form-item>
        <el-form-item label="邮箱" label-width="50">
          <el-input />
        </el-form-item>
        <el-form-item label="角色" label-width="50">
          <el-input />
        </el-form-item>
      </div>
      <div class="form-block" data-title="业务方案">
        <el-form-item label="方案描述*" label-width="70">
          <el-input type="textarea" />
        </el-form-item>
        <el-form-item label="风险阐述*" label-width="70">
          <el-input type="textarea" />
        </el-form-item>
        <el-form-item label="方案附件*" label-width="70">
          <el-upload
            v-model:file-list="fileList" class="upload-demo w-full"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :limit="3"
          >
            <el-button type="primary">
              上传
            </el-button>
          </el-upload>
        </el-form-item>
      </div>
    </div>

    <div mb10 flex gap-5>
      <div class="form-block" data-title="成本核算">
        <el-form-item label="网内成本" label-width="70">
          <el-input value="1000">
            <template #append>
              元
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="询价成本" value="" label-width="70">
          <el-input value="2000">
            <template #append>
              元
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="一次性费用" value="" label-width="90">
          <el-input value="2000">
            <template #append>
              元
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="销售成本" label-width="70">
          <el-input value="3000" disabled>
            <template #append>
              元
            </template>
          </el-input>
        </el-form-item>
      </div>
      <div class="form-block" data-title="售后服务">
        <el-form-item label="服务级别" label-width="70">
          <el-select placeholder="销售选了具体级别，则必填">
            <el-option label="无" value="1" />
            <el-option label="一级(鲸鱼)" value="1" />
            <el-option label="二级(海豚)" value="2" />
            <el-option label="三级(鲨鱼)" value="3" />
            <el-option label="四级(杂鱼)" value="4" />
          </el-select>
        </el-form-item>

        <el-form-item label="其他要求" label-width="70">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" />
        </el-form-item>
      </div>
    </div>
  </el-form>
  <div mt-3 flex-end-center>
    <el-button type="" size="default">
      暂存
    </el-button>
    <el-button type="primary" size="default">
      提交
    </el-button>
  </div>
</template>

<style scoped>
.el-checkbox {
  margin-right: 10px;
}
</style>
